import { Divider, Progress, Radio, Button, DatePicker } from "antd";
import React, { Component } from "react";
import echarts from "echarts";
import Echarts from "echarts-for-react";
import * as KanBanServese from "../../axios/ERPDeliveryRecord";
import { filter } from "echarts-gl";
class KanBan2 extends Component {
  state = {
    data1: [],
    filter: {
      value: "2",
    },
    data2: [],
    data3: [],
  };
  componentDidMount() {
    this.getData();
    this.getProduce();
  }
  getData = () => {
    KanBanServese.getProblem().then((res) => {
      if (res.data.code == 200) {
        this.setState({ data1: res.data.data || [] }, () =>
          this.getOption(res.data.data)
        );
      }
    });

    KanBanServese.getTotal().then((res1) => {
      if (res1.data.code == 200) {
        this.setState({ data3: res1.data.data || [] });
      }
    });
  };
  getProduce = () => {
    const { filter } = this.state;
    let str = `type=${filter.value ? filter.value : 2}`;
    KanBanServese.getProduce(str).then((res2) => {
      if (res2.data.code == 200) {
        this.setState({ data2: res2.data.data || [] }, () =>
          this.getOption2(res2.data.data)
        );
      }
    });
  };
  getOption = (data1) => {
    let data =
      data1 &&
      data1.map((item) => {
        return {
          name: item.name,
          value: item.num,
        };
      });
    let option = {
      title: {
        text: '装配质量问题',
        textStyle: {
          fontSize: 12
        },
        left: '5%',
        top: '5%'
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "15%",
        left: "55%",
        orient: "vertical",
        itemGap: 30,
        textStyle: {
          fontSize: 12,
        },
        formatter: function (name) {
          var total = 0;
          var tarValue;
          for (var i = 0; i < data.length; i++) {
            total += data[i].value;
            if (name === data[i].name) {
              tarValue = data[i].value;
            }
          }
          var p = ((tarValue / total) * 100).toFixed(2);
          let str = `${name}    |    ${p}%       ${tarValue}`;
          return str;
        },
      },
      color: [
        "#1a5fbb",
        "#23b5cc",
        "#ded71f",
        "#25cd84",
        "#eb6b9e",
        "#8700ff",
        "#7f7f7f",
      ],
      series: [
        {
          //   name: "Access From",
          type: "pie",
          center: ["30%", "50%"],
          radius: ["60%", "80%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 18,
              fontWeight: "bold",
              formatter: `{b} \n\n {c}`,
            },
          },
          labelLine: {
            show: false,
          },
          data,
        },
      ],
    };
    return option;
  };
  getOption2 = (data1) => {
    let data = [["month", "大机车间", "中小机车间", "意特拉车间"]];
    for (var item of data1) {
      let arr = [];
      arr.push(item.month + "月");
      arr.push(item.da);
      arr.push(item.zx);
      arr.push(item.yt);
      data.push(arr);
    }
    let option = {
      title: {
        text: '车间生产数量对比',
        textStyle: {
          fontSize: 12
        },
        left: '1%',
        top: '5%'
      },
      legend: {
        textStyle: {
          fontSize: 12,
        },
      },
      grid: {
        top: '14%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      color: ["#23b5cc", "#ded71f", "#eb6b9e", "#8700ff", "#7f7f7f"],
      tooltip: {},
      dataset: {
        source: data,
      },
      xAxis: { type: "category" },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        { type: "bar", barWidth: 20 },
        { type: "bar", barWidth: 20 },
        { type: "bar", barWidth: 20 },
      ],
    };
    return option;
  };
  handleSizeChange = (e) => {
    this.setState({ filter: { value: e.target.value } }, () => {
      this.getProduce();
    });
  };
  getNum = (num) => {
    let str = num.toString(), // 定义一个字符串，将传进来的数字转化为字符串
      ind = str.length % 3, // 字符串的长度除以3的余数在ind位置把字符串分为两部分
      strFront = str.slice(0, ind), // 这里是前半部分，长度为1或者2，长度也可能为0(strFront = '')
      strBehind = str.slice(ind); // 这里是后半部分，长度正好是3的倍数
    const arr = []; //定义一个空数组，用来盛放截取的字符串
    // 循环strBehind的长度，i梯度为3，来截取字符串
    for (let i = 0; i < strBehind.length; i += 3) {
      // 把截取的字符串push进arr中
      arr.push(strBehind.slice(i, i + 3));
    }
    // 判断ind是不是为0，为0则为假，不是0则为真
    if (ind) {
      //ind不为0，说明strFront不是空字符串，需要把它放在数组最前面
      arr.unshift(strFront);
    }
    // ind为0的话，说明正好 字符串的长度是3的倍数，strFront为空字符串''
    return arr.join(); //直接通过arr.join()把数组转化为以逗号分隔的字符串
  };
  render() {
    const { filter, data3 } = this.state;
    return (
      <div style={{
        background: '#eee',
        height: '100vh'
      }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
          }}
        >
          <div
            style={{
              flex: 1,
              padding: "0.5em",
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
              }}
            >
              <div
                style={{
                  flex: 1,
                  backgroundColor: "white",
                  padding: "0.5em",
                  marginRight: "0.5em",
                }}
              >
                <div
                  style={{
                    color: "rgba(0, 0, 0, 0.427450980392157)",
                    fontSize: 12,
                  }}
                >
                  总装配数量
                </div>
                <div
                  style={{
                    fontSize: 16,
                    color: "rgba(0, 0, 0, 0.847058823529412)",
                  }}
                >
                  {data3[0] && data3[0].num1 ? this.getNum(data3[0].num1) : 0}
                </div>
                <div
                  style={{
                    margin: '0.25em 0',
                    borderTop: "1px solid #38373730",
                  }}
                ></div>
                <div
                  style={{
                    display: "flex",
                    fontSize: 12,
                    paddingLeft: '0.25em',
                  }}
                >
                  <div style={{ width: "70%" }}>月均生产数量</div>
                  <div style={{ width: "20%" }}>
                    {data3[0] && data3[0].num2 ? this.getNum(data3[0].num2) : 0}
                  </div>
                </div>
              </div>
              <div
                style={{
                  flex: 1,
                  backgroundColor: "white",
                  padding: "0.5em",
                }}
              >
                <div
                  style={{
                    color: "rgba(0, 0, 0, 0.427450980392157)",
                    fontSize: 12,
                  }}
                >
                  远程验收数量
                </div>
                <div
                  style={{
                    fontSize: 16,
                    color: "rgba(0, 0, 0, 0.847058823529412)",
                  }}
                >
                  {data3[1] && data3[1].num1 ? this.getNum(data3[1].num1) : 0}
                </div>
                <div
                  style={{
                    margin: '0.25em 0',
                    borderTop: "1px solid #38373730",
                  }}
                ></div>
                <div
                  style={{
                    display: "flex",
                    fontSize: 12,
                    paddingLeft: '0.25em',
                  }}
                >
                  <div style={{ width: "70%" }}>验收比例</div>
                  <div style={{ width: "20%" }}>
                    {(data3[1] && data3[1].num2) || 0}%
                  </div>
                </div>
              </div>
            </div>
            <div
              style={{
                width: "100%",
                display: "flex",
                justifyContent: "space-between",
                marginTop: 10,
              }}
            >
              <div
                style={{
                  flex: 1,
                  backgroundColor: "white",
                  padding: "0.5em",
                  marginRight: "0.5em",
                }}
              >
                <div
                  style={{
                    color: "rgba(0, 0, 0, 0.427450980392157)",
                    fontSize: 12,
                  }}
                >
                  整机库存数量
                </div>
                <div
                  style={{
                    fontSize: 16,
                    color: "rgba(0, 0, 0, 0.847058823529412)",
                  }}
                >
                  {data3[2] && data3[2].num1 ? this.getNum(data3[2].num1) : 0}
                  <Progress
                    style={{ visibility: 'hidden' }}
                    strokeLinecap="square"
                    percent={(data3[3] && data3[3].num1) || 0}
                  />
                </div>
                <div
                  style={{
                    margin: '0.25em 0',
                    borderTop: "1px solid #38373730",
                  }}
                ></div>
                <div
                  style={{
                    display: "flex",
                    fontSize: 12,
                    paddingLeft: '0.25em',
                  }}
                >
                  <div style={{ width: "70%" }}></div>
                  <div style={{ width: "20%" }}></div>
                </div>
              </div>
              <div
                style={{
                  flex: 1,
                  backgroundColor: "white",
                  padding: "0.5em",
                }}
              >
                <div
                  style={{
                    color: "rgba(0, 0, 0, 0.427450980392157)",
                    fontSize: 12,
                  }}
                >
                  质检合格率
                </div>
                <div
                  style={{
                    fontSize: 16,
                    color: "rgba(0, 0, 0, 0.847058823529412)",
                  }}
                >
                  <div>
                    {(data3[3] && data3[3].num1) || 0}%
                  </div>
                  <Progress
                    strokeLinecap="square"
                    percent={(data3[3] && data3[3].num1) || 0}
                  />
                </div>
                <div
                  style={{
                    margin: '0.25em 0',
                    borderTop: "1px solid #38373730",
                  }}
                ></div>
                <div
                  style={{
                    display: "flex",
                    fontSize: 12,
                    paddingLeft: '0.25em',
                  }}
                >
                  <div style={{ width: "50%" }}>
                    合格
                    <span style={{ marginLeft: '0.25em' }}>
                      {(data3[3] && data3[3].num1) || 0}
                    </span>
                  </div>
                  <div style={{ width: "50%" }}>
                    不合格
                    <span style={{ marginLeft: '0.25em' }}>
                      {data3[3] && data3[3].num1 ? 100 - data3[3].num1 : "-"}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            style={{
              flex: 1,
              padding: "0.5em 0.5em 0.5em 0",
            }}
          >
            <div style={{ backgroundColor: "white" }}>
              <div
                style={{
                  fontWeight: 600,
                  padding: '0.5em 1em',
                }}
              >
                质检问题分析
              </div>
              <div
                style={{
                  borderTop: "1px solid #38373730",
                }}
              ></div>
              <div style={{ height: "31.5vh", width: "100%" }}>
                <Echarts style={{ height: "100%" }} option={this.getOption(this.state.data1)} />
              </div>
            </div>
          </div>
        </div>
        <div
          style={{
            width: "100%",
            padding: "0 0.5em",
          }}
        >
          <div
            style={{
              backgroundColor: "white",
            }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                padding: "0.5em 1em",
              }}
            >
              <div
                style={{
                  fontSize: 16,
                  fontWeight: 600,
                  width: "40%",
                }}
              >
                生产数量
              </div>
              <div>
                <Radio.Group
                  value={filter.value}
                  onChange={this.handleSizeChange}
                >
                  <Radio.Button value="1">本月</Radio.Button>
                  <Radio.Button value="2">全年</Radio.Button>
                  {/* <Radio.Button value="small">Small</Radio.Button> */}
                </Radio.Group>
                {/* <DatePicker.RangePicker style={{ marginLeft: 10 }} /> */}
              </div>
            </div>
            <div style={{ height: "50vh", width: "100%", marginTop: -15 }}>
              <Echarts style={{ height: "100%" }} option={this.getOption2(this.state.data2)} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default KanBan2;
